<template>
  <div id='user'>

    <div class='breadcrumb-wrap'>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>维修师</el-breadcrumb-item>
        <el-breadcrumb-item>评论</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="condition-wrap">
      <table>
        <tr>
          <td class='form-label'>订单号：</td>
          <td class='form-label'>
            <el-input placeholder="输入订单号" v-model='queryUserVo.orderNo'></el-input>
          </td>
          <td class='form-label'>评论：</td>
          <td class='form-label'>
            <el-input placeholder="输入内容支持模糊" v-model='queryUserVo.customContent'></el-input>
          </td>
          <td class='form-label'>
            <el-button type="info" @click="queryBtnClick()">查询</el-button>
          </td>
          <td class='form-label'>
            <el-button type="info" @click="queryallClick()">查全部</el-button>
          </td>
        </tr>
      </table>
    </div>
    <div class='option-wrap'>
    </div>
    <div class="gird-wrap">
      <el-table style="width: 100%" height="441" :border="true" :stripe="true" :data="list.dataList"
        @selection-change="selectionChange">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column prop='orderNo' label="订单号"></el-table-column>
        <el-table-column prop='userName' label="姓名"></el-table-column>
        <el-table-column prop='telephoneNo' label="手机号"></el-table-column>
        <el-table-column prop='customContent' label="评论内容"></el-table-column>
        <el-table-column prop='createTime' label="评论日期"></el-table-column>
        <el-table-column label="操作" width="110" fixed="right">
          <template scope="scope">
            <el-button type="text" @click="commentdetail(scope.row)">详情</el-button>
            <el-button @click="deleteRow(scope.$index,list.dataList,scope.row)" type="text"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class='option-wrap'>
      <el-button type="primary" @click="batchDelete()"><i class="el-icon-delete2"></i> 批量删除</el-button>
    </div>

    <el-dialog title="评论详情" :visible.sync="dialogFormVisible">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-col :span="6">订单标号</el-col>
          <el-col :span="18">{{selectItem.orderNo}}</el-col>
        </el-col>
        <el-col :span="12">
          <el-col :span="6">用户姓名</el-col>
          <el-col :span="18">{{selectItem.userName}}</el-col>
        </el-col>
        <el-col :span="12">
          <el-col :span="6">电话号码</el-col>
          <el-col :span="18">{{selectItem.telephoneNo}}</el-col>
        </el-col>
        <el-col :span="12">
          <el-col :span="6">评论时间</el-col>
          <el-col :span="18">{{selectItem.createTime}}</el-col>
        </el-col>
        <el-col :span="12">
          <el-col :span="6">故障</el-col>
          <el-col :span="18">{{selectItem.failureSubTypeName}}</el-col>
        </el-col>
        <el-col :span="12">
          <el-col :span="6">设备类型</el-col>
          <el-col :span="18">{{selectItem.deviceTypeName}}</el-col>
        </el-col>
        <el-col :span="12">
          <el-col :span="6">积分</el-col>
          <el-col :span="18">{{selectItem.totalScore}}</el-col>
        </el-col>
        <el-col :span="12">
          <el-col :span="6">评论内容</el-col>
          <el-col :span="18">{{selectItem.customContent}}</el-col>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import r from '../utils/RequestUtil';
  export default {
    name: 'user_list',
    data: function () {
      return {
        dialogFormVisible: false,
        queryUserVo: {
          orderNo: null,
          customContent: ''
        },
        page: {
          pageSize: 10,
          pageNo: 1,
          totalCount: null
        },
        selectItem: {},
        list: {
          dataList: [],
          selectDelete: [],
          idlist: []
        },
      }
    },
    methods: {
      selectionChange(val) {
        this.selectDelete = val;
      },
      deleteRow(index, data, row) {},
      batchDelete() {
        var data = this.selectDelete;
        for (var i = 0; i < data.length; i++) {
          this.list.idlist.push(data[i].id);
        }
      },
      queryallClick() {
        this.queryUserVo.customContent = "";
        this.queryUserVo.orderNo = "";
        this.showcommentinfo(this.page.pageNo, this.page.pageSize, this.queryUserVo.customContent, this.queryUserVo
          .orderNo);
      },
      queryBtnClick() {
        this.showcommentinfo(this.page.pageNo, this.page.pageSize, this.queryUserVo.customContent, this.queryUserVo
          .orderNo);
      },
      handleSizeChange(val) {
        this.showcommentinfo(this.page.pageNo, val, this.queryUserVo.customContent, this.queryUserVo.orderNo);
      },
      handleCurrentChange(val) {
        this.showcommentinfo(val, this.page.pageSize, this.queryUserVo.customContent, this.queryUserVo.orderNo);
      },
      showcommentinfo(pageNo, pageSize, customContent, orderNo) {},
      commentdetail(row) {
        this.dialogFormVisible = true;
        this.selectItem = row;
      }
    },
    mounted: function () {}
  }

</script>

<style></style>
